<template>
	<view class="shop-msg-page">
		<view class="shop-msg-content">
			<view class="act_explain-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						基础信息
					</view>
				</view>
				<view class="explain_tip" style="width: 226upx;" @click="amendShopMsg">
					修改店铺信息
				</view>
			</view>
			<view class="shop-name">
				<view class="">店铺名称:</view>
				<view class="">{{shopMsg.name}}</view>
			</view>
			<view class="shop-msg">
				<view class="">所在地址:</view>
				<view class="">{{ shopMsg.addressDetails }}</view>
			</view>
			<view class="shop-msg">
				<view class="">联系人:</view>
				<view class="">{{ shopMsg.contact }}</view>
			</view>
			<view class="shop-msg">
				<view class="">联系号码:</view>
				<view class="">{{ shopMsg.telephone }}</view>
			</view>
			<view class="shop-msg">
				<view class="">店铺地址:</view>
				<a style="color: #0084FF;">{{shopAddress | goodName}}</a>
			</view>
			<view style="border-bottom: 1upx solid #DEDEDE; height: 2upx; margin: 30upx 0;"></view>
			<view class="copy-address">
				<!-- #ifdef H5 -->
					<view data-clipboard-action="copy" :data-clipboard-text="shopAddress" class="btn" @click="copeAddress">复制店铺地址</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<button style="padding: 0;" class="btn" open-type="share">复制店铺地址</button>
				<!-- #endif -->
				<view class="">复制店铺链接，可以放自己的公众号</view>
			</view>
		</view>
		<view class="bank-card" v-if="page_type == '3'">
			<view class="act_explain-title" style="margin-bottom: 12upx;">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						收款方式
					</view>
				</view>
			</view>
			<view class="wechat-withdrawal" 
				:class="choiceWithdrawal == 1 ? 'select-wechat-withdrawal':'wechat-withdrawal'" 
				@click="setPayment(1)">
				<view class="">
					<view class="">
						方式一
					</view>
					<view class="" v-if="choiceWithdrawal == 1">
						当前使用
					</view>
					<view class="">
						收款到微信，提现到微信零钱
					</view>
					<view class="">
						交易手续费<view>0.6%</view>,每天限额提现5000
					</view>
				</view>
			</view>
			<view class="bank-card-withdrawal"
				:class="choiceWithdrawal == 2 ? 'select-bank-card-withdrawal':'bank-card-withdrawal'" 
				@click="setPayment(2)" 
				><!-- v-if="bankMsg.status == 0 ||bankMsg.status == 1 ||bankMsg.status == 2" -->
				<view class="">
					<view class="">
						方式二
					</view>
					<view class="" v-if="choiceWithdrawal == 2">
						当前使用
					</view>
					<view class="">
						收款到自己的绑定银行卡账户
					</view>
					<view class="">
						交易手续费<view>0.38%</view>,提现不限额，提现到绑定银行卡！
					</view>
					<view class="">
						建议使用
					</view>
				</view>
			</view>
			<view class="again-bangind" v-if="bankMsg.status == 0 || bankMsg.status == 1 || bankMsg.status == 2" @click="bindingCard('2')">
				重新绑卡
			</view>
		</view>
		<!-- <view class="bank-card">
			<view class="act_explain-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						收款方式
					</view>
				</view>
				<view class="bank-card-tip" :style="{color:bankMsg.status == 0?'#FF8B46':''}" v-if="bankMsg.status == 0">
					绑卡中
				</view>
				<view class="bank-card-tip" :style="{color:bankMsg.status == 0?'#33B888':''}" v-else-if="bankMsg.status == 1">
					已完成
				</view>
				<view class="bank-card-tip" style="width: 112upx;" :style="{color:bankMsg.status == 0?'#FF391F':''}" v-else-if="bankMsg.status == 2">
					绑卡失败
				</view>
				<view class="bank-card-tip" v-else>
					未绑卡
				</view>
			</view>
			<view class="" v-if="bankMsg.status == 0 ||bankMsg.status == 1 ||bankMsg.status == 2">
				<view class="bank-name">
					<view class="">开户名称</view>
					<input type="text" :value="bankMsg.account_name | bankName_val" disabled placeholder="请输入开户名称"/>
				</view>
				<view class="bank-name">
					<view class="">银行卡号</view>
					<input type="text" v-model="bankMsg.account_number" disabled placeholder="请输入银行卡号"/>
				</view>
				<view class="bank-name">
					<view class="">开户银行</view>
					<input type="text" :value="bankMsg.bank_id.bankname | bankName_val" disabled placeholder="请输入开户名称"/>
				</view>
				<view class="bank-name">
					<view class="">开户支行</view>
					<input type="text" :value="bankMsg.branch_bank_id.branchname | bankName_val" disabled placeholder="请输入银行卡号"/>
				</view>
				<view class="again-bangind" v-if="bankMsg.status == 1 ||bankMsg.status == 2" @click="bindingCard('2')" v-show="role==3">
					重新绑卡
				</view>
				<view class="again-bangind" v-if="bankMsg.status == 0" @click="bindingCard('2')" v-show="role==3">
					继续绑卡
				</view>
			</view>
			<view class="Bank-card-binding" v-else>
				<view class="" @click="bindingCard('1')">+立刻绑定收款银行卡</view>
				<view class="">支持企业公帐/个人账户</view>
			</view>
		</view> -->
		<!-- 复制地址成功提示 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				复制地址成功
			</view>
		</view>
	</view>
</template>

<script>
	import Clipboard from 'clipboard'
	export default{
		filters: {
			goodName(value) {
				if (!value) return ''
				if (value.length > 33) {
					return value.slice(0, 33) + '...'
				}
				return value
			},
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 15) {
					return value.slice(0, 15) + '...'
				}
				return value
			},
			bankName_val(value) {
				if (!value) return ''
				if (value.length > 16) {
					return value.slice(0, 16) + '...'
				}
				return value
			},
		},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				shopAddress:'',
				choiceWithdrawal:1,
				saveState:false,
				shopMsg:{},
				bankMsg:{},
				store_id:'',
				role:'',
				isCard:'',
				customer_info:'',
				page_type:''
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.role = uni.getStorageSync('userInfo').role;
			this.getCustomer()
		},
		onShow() {
			this.getShopMsg()
			this.isBindingCard()
		},
		onShareAppMessage(res) {
			let _self = this
			return {
				title: _self.customer_info.nickname + '邀请您参与' + _self.shopMsg.name, // 分享描述
				path: '/pages/recommend/recommend?store_id=' + this.shopMsg.customer_store_id + '&shopShare=1',
				imageUrl: _self.shopMsg.store_logo, // 分享图标
			}
		},
		methods:{
			getCustomer() {
				const data = {
					token: this.$store.getters.getToken,
					store_id: this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					if (res.status) {
						this.customer_info = res.data.userinfo
						this.page_type = res.data.role
						console.log(this.customer_info, "CCCCCCCCCCCCCCCCIIIIIIIIIIIII");
					}
				}).catch(err => {
					console.log(err)
				})
				// let customer_info = this.$api.getCustomerInfo(data)
				// console.log(this.customer_info)
			
			},
			isBindingCard(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.is_binding_card(data).then(res => {
					console.log(res)
					this.isCard = res.status
					if(res.status){
						// this.$store.commit('updataIndentId',res.res)
						// uni.setStorageSync('customer_store_identification_id',res.res)
						this.getBingindCard(res.res)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取银行卡绑定信息
			getBingindCard(bindingCard){
				// if(this.$store.getters.getIndentId){
					let data = {
						token:this.$store.getters.getToken,
						customer_store_identification_id:bindingCard
					}
					this.$api.gain_bingind_msg(data).then(res => {
						console.log(res)
						if(res.status){
							this.bankMsg = res.list
							console.log('银行卡绑卡情况',this.bankMsg)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				// }
				
			},
			// 获取店铺信息
			getShopMsg(){
				console.log(this.store_id,'store_id')
				let data = {
					token:this.$store.getters.getToken,
					customer_store_id:this.store_id,
				}
				console.log("4444444444444444444444444444");
				this.$api.gain_shop_msg(data).then(res =>{
					 if(res.status){
						this.shopMsg = res.data
						this.shopMsg.addressDetails = this.shopMsg.province.province+'省'+this.shopMsg.city.city+this.shopMsg.country.country+this.shopMsg.address
						// #ifdef H5
							this.shopAddress = this.current_url()+'/pages/recommend/specific/mechanism?store_id=' + this.shopMsg.customer_store_id
						// #endif
						// var pages = getCurrentPages();    //获取加载的页面
						// var currentPage = pages[pages.length - 1];  //获取当前页面的对象
						// var url = currentPage.route;  //当前页面url
						// #ifdef MP-WEIXIN
							this.shopAddress = this.$store.state.store_url+'/pages/recommend/specific/mechanism?store_id=' + this.shopMsg.customer_store_id
						// #endif
						this.choiceWithdrawal = this.shopMsg.payment_type
						console.log('店铺信息',this.shopMsg)
					 }
				}).catch(err => {
					console.log(err)
				})
				console.log(this.shopMsg);
			},
			// 复制店铺地址
			// #ifdef H5
				copeAddress(){
					const clipboard = new Clipboard('.btn')
					clipboard.on('success', (e) => {
						this.saveState = true
						setTimeout(()=> {
							this.saveState = false
						},1000)
					  clipboard.destroy()
					})
					clipboard.on('error', () => {
					  clipboard.destroy()
					})
				},
			// #endif
			// #ifdef MP-WEIXIN
				copeAddress(wechatNumber) {
					uni.setClipboardData({
						data: this.shopAddress,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
								}
							})
						}
					})
				},
			// #endif
			// 跳转机构详情页
			jumpMechanism(){
				uni.navigateTo({
					url: '/pages/recommend/specific/mechanism?store_id=' + this.store_id
				})
			},
			// 修改店铺信息
			amendShopMsg(){
				uni.setStorageSync('shopMsg',this.shopMsg)
				uni.navigateTo({
					url:'shopMsgAmend/shopMsgAmend?store_id=' + this.store_id
				})
			},
			bindingCard(flag){
				if(this.bankMsg != '' && flag != '1'){
					uni.setStorageSync('bankMsg',this.bankMsg)
					uni.navigateTo({
						url:'BankCardBinding/BankCardBinding?page=edit&store_id=' + this.store_id
					})
				}else if(flag == '1'){
						uni.navigateTo({
						url:'BankCardBinding/BankCardBinding?page=bingind&store_id=' + this.store_id
					})
					// bingind
				}
					
			},
			// 设置提现方式
			setPayment(valu){
				if(valu == 1){
					this.choiceWithdrawal = 1
				}else{
					this.choiceWithdrawal = 2
				}
				console.log(this.store_id,'store_id')
				if(this.isCard == false && this.choiceWithdrawal == 2){
					uni.navigateTo({
						url:'BankCardBinding/BankCardBinding?page=bingind&store_id=' + this.store_id
					})
				}else{
					let data = {
						token:this.$store.getters.getToken,
						store_id:this.store_id,
						payment_type:this.choiceWithdrawal
					}
					this.$api.set_payment(data).then(res =>{
						console.log(res);
					}).catch(err => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style>
	.bank-name{
		width: 100%;
		display: flex;
		margin-top: 10upx;
		border-bottom: 1upx solid #DEDEDE;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
	}
	.bank-name>view{
		color: #666666;
		font-size: 28upx;
	}
	.bank-name>input{
		color: #333333;
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 40upx;
	}
	/* 复制地址成功 */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	page{
		background: #F3F3F4;
	}
	.shop-msg-page{
		width: 100%;
	}
	.shop-msg-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.act_explain-title{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.explain-title{
		display: flex;
		width: 100%;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 10upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		line-height: 48upx;
		margin-left: 10upx;
	}
	.explain_tip{
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		color: #FF8B46;
		font-size: 24upx;
		border: 1upx solid #FF8B46;
	}
	.shop-name{
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		padding: 28upx 0 ;
		color: #666666;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.shop-name>view:nth-child(2){
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		margin-top: 2upx;
	}
	.shop-msg{
		width: 100%;
		margin: 20upx 0;
		box-sizing: border-box;
		color: #666666;
		display: flex;
		font-size: 28upx;
	}
	.shop-msg>view:nth-child(1){
		width: 140upx;
	}
	.shop-msg>a{
		width: 530upx;
		margin-left: 38upx;
		font-size: 28upx;
	}
	.copy-address{
		width: 100%;
		margin-top: 32upx;
		text-align: center;
	}
	.copy-address>view:first-child{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
	}
	.copy-address>button{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
	}
	.copy-address>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.bank-card{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.bank-card-tip{
		color: #FF391F;
		font-size: 24upx;
		line-height: 48upx;
		width: 90upx;
	}
	.Bank-card-binding{
		width: 100%;
		text-align: center;
		margin-top: 50upx;
	}
	.Bank-card-binding>view:first-child{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
	}
	.again-bangind{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		font-size: 32upx;
		text-align: center;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		margin: 0 auto;
		margin-top: 30upx;
	}
	.Bank-card-binding>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.wechat-withdrawal{
		width: 610upx;
		height: 260upx;
		margin-top: 20upx;
		margin-left: 36upx;
		background: #FFFCFB;
		border: 1px solid #FFC3BA;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/unchecked-withdrawal.svg);
		background-repeat: no-repeat;
		background-position: right bottom;  
		border-radius: 16upx;
	}
	.wechat-withdrawal>view>view:nth-child(1){
		padding: 5upx;
		text-align: center;
		width: 100upx;
		margin-top: 16upx;
		font-size: 22upx;
		background: #F6E6E0;
		border-radius: 0 200upx 200upx 0;
	}
	.wechat-withdrawal>view>view:nth-child(2){
		margin-top: 50upx;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
	}
	.wechat-withdrawal>view>view:nth-child(3){
		margin-top: 16upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
	}
	.wechat-withdrawal>view>view>view{
		display: inline-block;
		color: red;
	}
	.select-wechat-withdrawal{
		width: 610upx;
		height: 260upx;
		margin-top: 20upx;
		margin-left: 36upx;
		padding-top: 1upx;
		border: 0;
		border-radius: 16upx;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
	}
	.select-wechat-withdrawal>view:nth-child(1){
		width: 610upx;
		height: 245upx;
		border: 0;
		border-radius: 16upx;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/select-withdrawal.svg);
		background-repeat: no-repeat;
		background-position: right bottom;  
	}
	.select-wechat-withdrawal>view>view:nth-child(1){
		padding: 5upx;
		text-align: center;
		width: 100upx;
		margin-top: 16upx;
		color: #ffffff;
		font-size: 22upx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 0 200upx 200upx 0;
	}
	.select-wechat-withdrawal>view>view:nth-child(2){
		display: inline-block;
		position: absolute;
		margin-top: 10upx;
		right: 84upx;
		padding: 4upx;
		color: #FF664E;
		font-size: 18upx;
		background: #FFF10C;
		border-radius: 18upx 18upx 18upx 4upx;
	}
	.select-wechat-withdrawal>view>view:nth-child(3){
		margin-top: 50upx;
		font-size: 32upx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
	}
	.select-wechat-withdrawal>view>view:nth-child(4){
		margin-top: 16upx;
		font-size: 24upx;
		color: #ffffff;
		text-align: center;
	}
	.select-wechat-withdrawal>view>view>view{
		display: inline-block;
		color: #FFF10C;
	}
	.bank-card-withdrawal{
		width: 610upx;
		height: 260upx;
		margin-top: 20upx;
		margin-left: 36upx;
		background: #FFFCFB;
		border: 2upx solid #FFC3BA;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/unchecked-withdrawal.svg);
		background-repeat: no-repeat;
		background-position: right bottom;  
		border-radius: 16upx;
	}
	.bank-card-withdrawal>view>view:nth-child(1){
		padding: 5upx;
		text-align: center;
		width: 100upx;
		margin-top: 16upx;
		font-size: 22upx;
		background: #F6E6E0;
		border-radius: 0 200upx 200upx 0;
	}
	.bank-card-withdrawal>view>view:nth-child(2){
		margin-top: 50upx;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
	}
	.bank-card-withdrawal>view>view:nth-child(3){
		margin-top: 16upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
	}
	.bank-card-withdrawal>view>view>view{
		display: inline-block; 
		color: red;
	}
	.bank-card-withdrawal>view>view:nth-child(4){
		font-size: 24upx;
		font-weight: bold;
		color: #E52929;
		text-align: center;
	}
	.select-bank-card-withdrawal{
		width: 610upx;
		height: 260upx;
		margin-top: 20upx;
		margin-left: 36upx;
		padding-top: 1upx;
		border: 0;
		border-radius: 16upx;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
	}
	.select-bank-card-withdrawal>view:nth-child(1){
		width: 610upx;
		height: 245upx;
		border: 0;
		background-image: url(https://tool.tuanhaoke.cn/static/image/shortvideo/select-withdrawal.svg);
		background-repeat: no-repeat;
		background-position: right bottom;  
	}
	.select-bank-card-withdrawal>view>view:nth-child(1){
		padding: 5upx;
		text-align: center;
		width: 100upx;
		margin-top: 16upx;
		color: #ffffff;
		font-size: 22upx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 0 200upx 200upx 0;
	}
	.select-bank-card-withdrawal>view>view:nth-child(2){
		display: inline-block;
		position: absolute;
		margin-top: 10upx;
		right: 84upx;
		padding: 4upx;
		color: #FF664E;
		font-size: 18upx;
		background: #FFF10C;
		border-radius: 18upx 18upx 18upx 4upx;
	}
	.select-bank-card-withdrawal>view>view:nth-child(3){
		margin-top: 50upx;
		font-size: 32upx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}
	.select-bank-card-withdrawal>view>view:nth-child(4){
		margin-top: 16upx;
		font-size: 24upx;
		color: #ffffff;
		text-align: center;
	}
	.select-bank-card-withdrawal>view>view>view{
		display: inline-block; 
		color: #FFF10C;
	}
	.select-bank-card-withdrawal>view>view:nth-child(5){
		font-size: 24upx;
		font-weight: bold;
		color: #FFF10C;
		text-align: center;
	}
</style>
